import React, { FC, useEffect, useState } from 'react'
import ProCard from '@ant-design/pro-card'
import VoConfigForm from '@pages/VoView/components/VoConfigForm'
import { Divider } from 'antd';
import FieldForm from '@pages/VoView/components/FieldForm'
import TableField from '@pages/VoView/components/TableField'
import { detailProFile } from '@/services/proFile'

interface VoViewProps {
  projectId:string,
  fileId:string,
}


const VoView :FC<VoViewProps> = (props) => {

  const { projectId,fileId } = props;
  const [fileDetail, setFileDetail] = useState<any>({})
  const [superId, setSuperId] = useState<any>()

  useEffect(() => {
    detailProFile({ id: fileId }).then(res => {
      if (res.code === 10000) {
        setFileDetail(res.data)
        setSuperId(res.data.super_id)
      }
    })
  },[fileId])

  return(
    <ProCard >
      <VoConfigForm fileId={fileId} fileDetail={fileDetail} projectId={projectId} />
      <Divider />
      <TableField superId={superId}/>
      <Divider />
      <FieldForm projectId={projectId} fileId={fileId} />
    </ProCard>
  )
}

export default VoView;
